<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body class="">
	
	<header class="mui-bar mui-bar-nav public-green-bgcolor header-no-shadow header-txt-color">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">绑定手机</h1>
	</header>
	
	<div class="mui-content">
		<div class="about-div">
	    	<img src="../images/bind_phone.jpg" alt="" />
	    	
	    	<p style="margin-bottom:30px;">已绑定手机号: <span class="telephone">151xxxx1520</span></p>
	    </div>
		
		<div class="bind_phone-div">
			<form class="mui-input-group public-form-margin" action="javascript:;">
	    		<div class="mui-input-row">
	    	    	<a class="mui-navigate-right">
		    	        <label class="small-txt" style="width:65%;">修改绑定手机</label>
		    	        <input type="text" placeholder="" readonly>
	    	        </a>
	    	    </div>
	    	</form>
		</div>
		
	</div>


<script src="../lib/js/mui.min.js"></script>
<script src='../lib/js/my_plugin.js'></script>
<script>
	castapp.init();
	
	var modifyEle = document.querySelector('.mui-input-row');
	var telepEle = document.querySelector('.telephone');
	
	//点击修改绑定手机
	modifyEle.addEventListener('tap', function(e){
		e.stopPropagation();
		castapp.newInterface({
			url: './modify_phone.html',
			id: 'modify_phone'
		});
	});
	
	
	var userInfo = localStorage.getItem('userInfo');
	userInfo = userInfo? JSON.parse(userInfo): {};
	telepEle.innerHTML = userInfo.telephone;
	
	
	
</script>

</body>
</html>